<template>
	<el-dialog title="查看客户信息" :close-on-click-modal="true" :visible.sync="visible" width="55%">
		<div style="height: 350px;overflow-y:auto;">
			<el-tag>客户信息</el-tag><br />
			<el-form :model="dataForm" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="120px" :inline="true" size="small">
				<el-form-item v-for="item in cusFieldList" :key="item.colName" :prop="item.colName" :label="item.colValue">
					<el-input v-model="dataForm[item.colName]" v-if="item.colType === '0'" type="text"></el-input>
					<el-input v-model="dataForm[item.colName]" v-if="item.colType === '1'" type="tel"></el-input>
					<el-date-picker v-model="dataForm[item.colName]" v-if="item.colType === '2'" size="mini" type="datetime" placeholder="选择日期时间" style="width: 180px;">
					</el-date-picker>
					<el-input v-model="dataForm[item.colName]" v-if="item.colType === '3'" type="email"></el-input>
					<el-input v-model="dataForm[item.colName]" v-if="item.colType === '4'" type="textarea"></el-input>
					<el-select v-model="dataForm[item.colName]" placeholder="请选择" v-if="item.colType === '5'">
					    <el-option v-for="item in item.colExtend" :key="item.key" :label="item.value" :value="item.key">
					    </el-option>
					</el-select>	
				</el-form-item>
			</el-form>
			<el-tag>子模块资料</el-tag><br />
			<div  v-for="(item1 ,idx1) in subCfgList" :key="idx1"> 
					<div style="display: inline-block;"><span style="font-size: 14px;color: #606266;">{{item1.name}}</span></div>
					&nbsp;&nbsp;&nbsp;
					<!--<el-button type="primary" @click="addCustomerSubHandle(item1)" size="mini" round>新建</el-button>-->
					<el-table  :data="item1.subInfoList" style="width: 100%;">
						<el-table-column v-for="(value ,_key) in item1.subCfgMap" :key="_key" :prop="_key" header-align="center" align="center" :label="value">
							<template slot-scope="scope">
								<el-popover placement="left" :content="scope.row[_key]" trigger="hover">
									<span slot="reference">
						              <div style="height: 20px;">{{scope.row[_key]}}</div>
						            </span>
								</el-popover>
							</template>
						</el-table-column>
					</el-table>
				</br>
				</div>
			<div v-if="tagsList.length!=0">
				<el-tag>客户标签</el-tag><br /><br />
				<customerTagsReadonly :tagsList="tagsList"></customerTagsReadonly>
				<br />
			</div>	
		</div>
		<span slot="footer" class="dialog-footer">
    </span>
	</el-dialog>
</template>

<script>
	import dateUtil from '@/utils/dateUtil'
	import customerTagsReadonly from './cc-customer-component-tags-readonly'
	export default {
		data() {
			return {
				dataList: [],
				visible: false,
				dataListLoading: false,
				dataForm: {

				},
				id: '',
				customerd: [],
				cusFieldList: [],
				page: 1,
				limit: 5,
				totalPage: 0,
				subCfgList:[],
				tagsList:[],
			}
		},
		components: {
			customerTagsReadonly
		},
		filters: {
			formatDateTime(timestamp) {
				return dateUtil.formatDateTime(timestamp)
			},
			formatTimer(timestamp) {
				return dateUtil.formatTimer(timestamp)
			},
		},
		methods: {
			init(id) {
				var that = this
				this.dataForm.id = id || 0;
				that.visible = true
				that.$nextTick(() => {
					this.$refs['dataForm'].resetFields()
					this.$http.post('/cc/customer/manage/detail', {
						id:id
					}).then(resp => {
						console.log("查看客户信息",resp)
						var cusFieldList = resp.data.cusFieldList
						for(var i = 0; i < cusFieldList.length; i++){
							if(cusFieldList[i].colType == '5' && cusFieldList[i].colExtend != ''){
								cusFieldList[i].colExtend =  JSON.parse(cusFieldList[i].colExtend);
							}
						}			
						that.cusFieldList = cusFieldList
						that.subCfgList = resp.data.subCfgList
						that.dataForm.cusName = resp.data.cusName
						that.dataForm.cusPhone = resp.data.cusPhone
						that.dataForm.cusAddress = resp.data.cusAddress
						// that.dataForm.cusCreateDate = resp.data.cusCreateDate
						that.dataForm.cusCreateUsername = resp.data.cusCreateUsername
						that.dataForm.cusOpenId = resp.data.cusOpenId
						that.dataForm.cusVisitorId = resp.data.cusVisitorId
						that.dataForm.cusDesc = resp.data.cusDesc
						that.dataForm.cusExt1 = resp.data.cusExt1
						that.dataForm.cusExt2 = resp.data.cusExt2
						that.dataForm.cusExt3 = resp.data.cusExt3
						that.dataForm.cusExt4 = resp.data.cusExt4
						that.dataForm.cusExt5 = resp.data.cusExt5
						that.dataForm.cusExt6 = resp.data.cusExt6
						that.dataForm.cusExt7 = resp.data.cusExt7
						that.dataForm.cusExt8 = resp.data.cusExt8
						that.dataForm.cusExt9 = resp.data.cusExt9
						that.dataForm.cusExt11 = resp.data.cusExt11
						that.dataForm.cusExt12 = resp.data.cusExt12
						that.dataForm.cusExt13 = resp.data.cusExt13
						that.dataForm.cusExt14 = resp.data.cusExt14
						that.dataForm.cusExt15 = resp.data.cusExt15
						that.dataForm.cusExt16 = resp.data.cusExt16
						that.dataForm.cusExt17 = resp.data.cusExt17
						that.dataForm.cusExt18 = resp.data.cusExt18
						that.dataForm.cusExt19 = resp.data.cusExt19
						that.dataForm.cusExt20 = resp.data.cusExt20
						that.dataForm.cusExt21 = resp.data.cusExt21
						that.dataForm.cusExt22 = resp.data.cusExt22
						that.dataForm.cusExt23 = resp.data.cusExt23
						that.dataForm.cusExt24 = resp.data.cusExt24
						that.dataForm.cusExt25 = resp.data.cusExt25
						that.dataForm.cusCreateUsername = resp.data.cusCreateUsername
						that.tagsList = resp.data.cusLabelList //后台传过来的被选中的集合
					})
				})

			},
			// 每页数
			sizeChangeHandle(val) {
				this.limit = val
				this.page = 1
			},
			// 当前页
			currentChangeHandle(val) {
				this.page = val
			},
		}
	}
</script>
<style scoped="scoped">
	.el-form-item{
		width: 335px;
	}
	.el-select{
		width: 197px;
	}
</style>